<template>
    <div >
        <div :visible.sync="DialogVisible" append-to-body title="图片素材库" width="100%">
            <el-container >
                <el-main>
                    <el-card >
                        <div slot="header">
                            <el-row>
                                <el-col :span="14" style="display:flex;align-items:center"></el-col>
                                <el-col :span="10">
                                    <div class="flex align-center">
                                        <el-input clearable placeholder="请输入文件名称" style="width:200px" v-model="page.name"></el-input>
                                        <el-button @click="getMedia('init')" size="small" style="margin-left:10px" type="success">查询</el-button>
                                        <el-upload :action="uploadApi" :before-upload="beforeUpload" :data="{file_type:'image'}" :file-list="[]" :headers="headers" :on-progress="handleProgress" :on-success="handleSuccess" multiple>
                                            <el-button size="small" style="margin-left:10px" type="primary">批量上传</el-button>
                                        </el-upload>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div v-loading="tableLoading">
                            <el-alert :closable="false" center show-icon title="暂无数据" type="info" v-if="tableData.length <= 0" />
                            <el-row :gutter="5">
                                <div class="pb-10">
                                    <el-checkbox-group :max="1" v-model="urls">
                                        <el-col :key="index" :span="4" v-for="(item,index) in tableData">
                                            <el-card :body-style="{ padding: '5px' }">
                                                <el-image :preview-src-list="[item.full_path]" :src="item.full_path" :z-index="999" fit="contain" style="width: 100%;height: 100px" />
                                                <div>
                                                    <div class="pd-10">
                                                        <a :title="item.name" class="text-line1 font-12" v-if="item.name">{{item.name}}</a>
                                                        <a :title="item.name" class="text-line1 font-12 color-999" v-else>----</a>
                                                    </div>
                                                    <el-checkbox :label="item.full_path" class="material-name">选择</el-checkbox>
                                                    <el-row>
                                                        <el-col :span="24" class="col-do">
                                                            <el-button @click="materialDel(item)" size="medium" type="text">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-checkbox-group>
                                </div>
                            </el-row>
                            <div class="pt-10">
                                <el-pagination :current-page.sync="page.page" :page-size="page.limit" :page-sizes="[12, 24]" :total="page.total" @current-change="pageChange" @size-change="sizeChange" class="pagination" layout="total, sizes, prev, pager, next, jumper" />
                            </div>
                        </div>
                    </el-card>
                </el-main>
            </el-container>
            <span class="dialog-footer" slot="footer">
                <el-button @click="DialogVisible = false">取消</el-button>
                <el-button @click="sureUrls" type="primary">确 定</el-button>
            </span>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getStorage } from '@/utils/auth'
import '../../../public/UEditor/dialogs/internal'
export default {
    props: {
        type: {
            default: 'image',
            Type: String,
        },
        value: {
            default: '',
            Type: String,
        },
        size: {
            default: '60px',
            Type: String,
        },
    },
    data() {
        return {
            imageUrl: '',
            headers: {
                Authorization: 'Bearer ' + getStorage('Authorization'),
            },
            DialogVisible: true,
            tableLoading: false,
            revalue: this.value,
            tableData: [],
            page: {
                page: 1,
                limit: 12,
                total: 0,
            },
            urls: [],
        }
    },
    computed: {
        ...mapGetters(['uploadApi']),
    },
    mounted() {
        this.getMedia()
    },
    methods: {
        getMedia() {
            this.tableLoading = true
            this.$request.get('/file/index', this.page).then((res) => {
                this.tableData = res.items
                this.page.total = res.page.total
                this.tableLoading = false
            })
        },
        materialDel(item) {
            this.$request.del('/file/delete?id=' + item.id).then((res) => {
                this.$message.success('删除成功')
                this.getMedia()
            })
        },
        deleteMaterial() {
            const that = this
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(function () {
                that.revalue = ''
                console.log(that.revalue)
            })
        },
        handleSuccess(res, file) {
            this.getMedia()
        },
        handleProgress() {},
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG、PNG、GIF、JPEG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        sureUrls() {
            // if (this.materialgroupObjId == '6094b86ea54398783fcade2b2cd98d89') {
            //     this.urls.forEach((item) => {
            //         str += '<video style="width:-webkit-fill-available;" controls src="' + item + '"><div>111</div></video><br/>'
            //         // this.$set(this.value, this.value.length, item)
            //     })
            // } else {
            let str = ''
            this.urls.forEach((item) => {
                str += '<img src="' + item + '">'
                // this.$set(this.value, this.value.length, item)
            })
            nowEditor.dialog.close(true)
            nowEditor.editor.setContent(str, true)
            this.DialogVisible = false
            // }
        },
        sizeChange(val) {
            this.page.page = 1
            this.page.limit = val
            this.getMedia()
        },
        pageChange(val) {
            this.page.page = val
            this.getMedia()
        },
    },
}
</script>

<style lang="scss" scoped>
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>